<template>
	<div class="rank">
		<div class="tab">
			<div class="tab-tit clearfix">
				<a href="javascript:;" class="on">
					<p class="img">
						<i></i>
					</p>
					<p class="text">热卖排行</p>
				</a>
				<a href="javascript:;">
					<p class="img">
						<i></i>
					</p>
					<p class="text">特价排行</p>
				</a>
				<a href="javascript:;">
					<p class="img">
						<i></i>
					</p>
					<p class="text">新品排行</p>
				</a>
			</div>
		</div>
		<div class="content">
			<ul>
				<li>
					<div class="img-item">
						<p class="tab-pic">
							<a href="#">
								<img src="./images/1.jpg" />
							</a>
						</p>
						<div class="tab-info">
							<div class="info-title">
								<a href="#"
									>【官网价直降1100】Apple iPhone 8 Plus 256GB 银色
									移动联通电信4G手机</a
								>
							</div>
							<p class="info-price">定金：¥100.00</p>
						</div>
					</div>
					<div class="img-item">
						<p class="tab-pic">
							<a href="#">
								<img src="./images/1.jpg" />
							</a>
						</p>
						<div class="tab-info">
							<div class="info-title">
								<a href="#"
									>【官网价直降1100】Apple iPhone 8 Plus 256GB 银色
									移动联通电信4G手机</a
								>
							</div>
							<p class="info-price">定金：¥100.00</p>
						</div>
					</div>
					<div class="img-item">
						<p class="tab-pic">
							<a href="#">
								<img src="./images/1.jpg" />
							</a>
						</p>
						<div class="tab-info">
							<div class="info-title">
								<a href="#">
									【官网价直降1100】Apple iPhone 8 Plus 256GB 银色
									移动联通电信4G手机
								</a>
							</div>
							<p class="info-price">定金：¥100.00</p>
						</div>
					</div>
					<div class="img-item">
						<p class="tab-pic">
							<a href="#">
								<img src="./images/1.jpg" />
							</a>
						</p>
						<div class="tab-info">
							<div class="info-title">
								<a href="#"
									>【官网价直降1100】Apple iPhone 8 Plus 256GB 银色
									移动联通电信4G手机</a
								>
							</div>
							<p class="info-price">定金：¥100.00</p>
						</div>
					</div>
				</li>
			</ul>
		</div>
	</div>
</template>

<script lang="ts">
export default {
	name: "Rank",
};
</script>

<script lang="ts" setup></script>

<style lang="less" scoped>
.rank {
	width: 1200px;
	margin: 0 auto;

	.tab {
		margin: 0 auto;
		overflow: hidden;
		width: 312px;

		.tab-tit {
			text-align: center;

			a {
				display: block;
				padding: 0 18px;
				float: left;
				text-decoration: none;
				font-size: 16px;
				color: #999;

				p {
					margin: 5px 0;
				}

				.img {
					i {
						width: 35px;
						height: 35px;
						display: block;
						background: url(./images/bg0.png);
						margin-left: 10px;
					}
				}

				.text {
					line-height: 28px;
				}
			}

			.on {
				color: #e60012;

				.img {
					i {
						background-position: -35px 0;
					}
				}
			}
		}
	}

	.content {
		overflow: hidden;
		padding: 10px;

		ul {
			li {
				overflow: hidden;
				list-style: none;
				line-height: 18px;

				.img-item {
					border: 1px solid #e1251b;
					width: 269px;
					float: left;
					overflow: hidden;
					margin: 0 12px 10px;
					background: #fff;

					.tab-pic {
						width: 230px;
						height: 210px;
						overflow: hidden;
						text-align: center;
						margin: 5px auto 18px;

						a {
							img {
								width: 200px;
								height: 200px;
							}
						}
					}

					.tab-info {
						background: #fafafa;

						.info-title {
							height: 50px;
							line-height: 28px;
							overflow: hidden;
							margin: 0 auto;
							padding-left: 10px;

							a {
								color: #333;
								text-decoration: none;
							}
						}

						.info-price {
							font-size: 20px;
							color: #e1251b;
							height: 35px;
							padding-left: 10px;
							display: block;
							line-height: 24px;
							margin: 10px auto 0;
						}
					}
				}
			}
		}
	}
}
</style>
